<template>
	<!-- 主体内容区域 -->
	<div class="content">
		<!-- 头部区域 -->
		<div class="top">
			<h5 class="a">文章</h5>
			<h5 class="l-12">/</h5>
			<h5 class="a">添加文章</h5>
			<button @click="backarticle()">返回</button>
		</div>
		<!-- 主要区域 -->
		<div class="main">
			<!-- 主要区域的头部标题 -->
			<h4 class="t-10">请填写文章相关信息</h4>
			<ul class="list">
				<!-- 标题区域 -->
				<li class="item">
					<span>文章标题<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入讲师名称" v-model="person.title">
				</li>
				<!-- 封面区域 -->
				<li class="item">
					<span>文章封面<font style="color: red;">*</font></span>
					<div class="add-box">
						<div class="add">
							<p class="title">+</p>
							<p>上传图片</p>
						</div>
						<div>只能上传jpg/png文件，且不超过500kb</div>
					</div>
				</li>
				<!-- 描述区域 -->
				<li class="item">
					<span>文章描述<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入文章描述" v-model="person.inf_describe">
				</li>
				<!-- 介绍区域 -->
				<li class="item">
					<span>详细介绍<font style="color: red;">*</font></span>
					<textarea placeholder="请输入文章内容" v-model="person.text_content"></textarea>
				</li>
				<!-- 按钮区域 -->
				<li class="btn">
					<button class="add" @click="addArticle()">立即添加</button>
					<button class="cancel" @click="backarticle()">取消</button>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { ref } from 'vue'
import { addInfArticle } from '../api/api.js'
export default {
	setup() {
		const person = ref({
			title: '',
			cover: '',
			inf_describe: '',
			text_content: '',
			add_tim: ''
		});
		return {
			person
		}
	},
	methods: {
		backarticle() {
			this.$router.push('/article')
		},
		addArticle(){
			const _Year = new Date().getFullYear();
			const _Month = new Date().getMonth() + 1;
			const _Day = new Date().getDate() + 1;
			const NowTime = _Year + "." + _Month + "." + _Day;
			this.person.add_tim = NowTime;
			const _data = this.person
			console.log(_data)
			addInfArticle(_data)
			.then(res => {
				console.log(res)
			}).catch(err => [
				console.log(err)
			])
		}
	}
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.content {
	width: calc(100% - 60px);
	background-color: #f0f0f0;
	padding: 35px 30px;
}

.top {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 30px;
}

.top>a {
	min-width: 30px;
}

.l-12 {
	margin: 0 12px;
}

.main {
	width: calc(100% - 60px);
	height: 100vh;
	padding: 30px;
	background-color: #fff;
}

.t-10 {
	margin-bottom: 10px;
}

.list {
	width: 100%;
}

.item {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.list>li:nth-child(2) {
	height: 115px;
}

.list>li:nth-child(4) {
	height: 370px;
}

textarea {
	width: 1050px;
	height: 350px;
	padding: 10px 0 0 10px;
	font-size: 14px;
	resize: none;
	color: #7575a1;
}

.item>span {
	width: 78px;
	font-weight: bold;
	margin-right: 38px;
}

.item>input {
	width: 240px;
	height: 30px;
	outline: none;
	border: 1px solid #959595;
	padding: 0 10px;
	border-radius: 4px;
}

.add-box {
	width: 100%;
	height: 100%;
	margin-left: 8px;
}

.add-box>.add {
	width: 85px;
	height: 80px;
	background-color: #fafafa;
	border-radius: 2px;
	padding-top: 5px;
	margin-bottom: 7px;
}

.add>.title {
	text-align: center;
	font-size: 28px;
	color: #929292;
	margin: 10px 0 0 0;
}

.add>p {
	text-align: center;
}

.top>button {
	margin-left: 86%;
	width: 68px;
	height: 30px;
	text-align: center;
	border: none;
	background: #38a28a;
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
}

.btn {
	width: 220px;
	height: 48px;
	margin: 20px 0 0 116px;
}

.btn>button {
	text-align: center;
	line-height: 32px;
	height: 32px;
	outline: none;
	cursor: pointer;
	border-radius: 4px;
	color: #fff;
	border: none;
}

.btn>button:nth-child(1) {
	width: 78px;
	margin-right: 20px;
	background-color: #38a28a;
}

.btn>button:nth-child(2) {
	width: 60px;
	border: 1px solid #e9ebf0;
	color: #101010;
}
</style>
